<template>
<view>
	<!-- 导航栏 -->
	<view class="header-fit-box" :style="'padding-top: '+ StatusBar +'px;'">
		<view class="header-fit" :style="{'height':(CustomBar-StatusBar) +'px'}">
			<image @click="back" class="back" src="@/static/home/subpage/back_black.png"></image>
			<text class="text">选择期货公司</text>
			<view class="item" @click="openAccount">
				<text class="li">开户</text>
				<image src="@/static/home/subpage/icn_blue.png"></image>
			</view>
		</view>
	</view>
	<view :style="{'height':CustomBar +'px'}" style="border-bottom:2rpx solid #F6F7F9;"></view>
	<view class="search-box">
		<view class="search-optional">
			<image class="search-icon" src="@/static/home/search.png"></image>
			<input type="text" class="ipt" placeholder-class="pipt" placeholder="请输入期货公司名称/简称">
		</view>
	</view>
	<view class="group-box">
		<view class="item" v-for="(item,index) in 5">
			<view class="lab">A</view>
			<view class="lab-box">
				<view class="tab" v-for="(item,index) in 10">安粮期货</view>
			</view>
		</view>
	</view>
</view>
</template>

<script>
export default {
	data() {
		return {
			
		};
	},
	methods:{
		back(){
			uni.navigateBack();
		},
		openAccount(){
			uni.navigateTo({
				url: '/pages/homeSubpage/futuresKf/futuresKf'
			});
		}
	}
}
</script>

<style lang="scss">
	
.header-fit-box{
	.header-fit{
		padding:0 16rpx 0 10rpx;
		.item{
			.li{
				font-size: 28rpx;
				font-weight: 400;
				color: #356FE5;
			}
			& image{
				width: 48rpx;height:48rpx;
			}
		}
	}
}
.search-box{
	padding:24rpx 32rpx;
	background-color: #fff;
	.search-optional{
		height: 66rpx;
		background: #F4F5F7;
		border-radius: 32rpx;
		display: flex;
		align-items: center;
		padding:0 20rpx;
		.search-icon{
			width: 48rpx;
			height: 48rpx;
			margin-right:20rpx;
		}
		.ipt{
			color: rgba(0,0,0,0.8);
			font-size: 24rpx;
			flex:1;
		}
		.pipt{
			color: #8E8E93;
		}
	}
}
.group-box{
	.item{
		.lab{
			height: 32rpx;
			background: #F4F5F7;
			font-size: 20rpx;
			color: #356FE5;
			line-height: 32rpx;
			padding:0 32rpx;
		}
		.lab-box{
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			padding:4rpx 32rpx;
			justify-content: space-between;
			.tab{
				font-size: 24rpx;
				color: rgba(0,0,0,0.8);
				height:58rpx;
				line-height: 58rpx;
				width: 33.33%;
			}
			.tab:nth-child(3n){
				padding-left:30rpx;
				box-sizing: border-box;
			}
			.tab:nth-child(3n-1){
				padding-left:20rpx;
				box-sizing: border-box;
			}
			
		}
	}
}
</style>
